<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务计划列表</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            width: 100vw;
        }

        main {
            width: 100vw;
            background-color: #f5f5f5;
            height: 100vh;

            header {
                height: 60px;
                background-color: red;

                h1 {
                    display: flex;
                    justify-content: center;
                    color: white;
                }
            }

            section {
                width: 1000px;
                margin: 0 auto;

                .input {
                    width: 50vw;
                    padding: 10px;
                    margin-bottom: 10px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                }
            }

            footer {
                width: 1000px;
                margin: 0 auto;

                ul {
                    padding-left: 0px;

                    li {
                        list-style: none;
                        height: 30px;
                        background-color: white;
                        margin-top: 20px;
                        display: flex;
                        align-items: center;
                        position: relative;

                        .delete-btn {
                            display: none;
                            position: absolute;
                            right: 10px;
                            top: 5px;
                        }

                        &:hover .delete-btn {
                            display: block;
                        }

                        .completed {
                            text-decoration: line-through;
                            color: gray;
                        }
                    }
                }
            }
        }
    </style>
</head>

<body>
    <main>
        <header>
            <h1>任务计划列表</h1>
        </header>
        <section>
            <p>
                <input type="text" id="MemoInput" class="input" placeholder="例如:吃饭睡觉打豆豆" />
                <button id="add">添加</button>
            </p>
            <p>
                <label id="incomplete">未完成任务: 0</label>
            </p>
            <div>
                <button onclick="btn('all')">所有任务</button>
                <button onclick="btn('incomplete')">未完成的任务</button>
                <button onclick="btn('completed')">完成的任务</button>
            </div>
        </section>
        <footer>
            <h4>任务列表:</h4>
            <ul id="List" class="List"></ul>
        </footer>
    </main>
</body>
<script src="./任务计划列表.js"></script>

</html>